Tbeam - 技巧 项目

技巧 1

把一个数组对象的部分属性给另一个空数组对象的部分属性，该空数组对象自带创建这些部分属性，如 state.sourceList 内容：

state.sourceList = [
	{
		sourceId: '1111',
        sourceName: '可乐',
        sourceTime: '2021-11-07'
	},
    {
		sourceId: '2222',
        sourceName: '冰糖',
        sourceTime: '2021-11-06'
	},
    {
		sourceId: '3333',
        sourceName: '雪梨',
        sourceTime: '2021-11-05'
	},
]

空数组 state.sourceNameList value 和 label 的获得 sourceName 的值

state.sourceNameList = [
	{
		label: `可乐`,
        value: `可乐`
	},
    {
		label: `冰糖`,
        value: `冰糖`
	},
    {
		label: `雪梨`,
        value: `雪梨`
	},
]

将该数组对象的 sourceName 给一个空对象数组的 value 和 label 属性，代码如下：

// 把value绑定到select需要的key
state.sourceList.map((item) => {
  state.sourceNameList.push(
    Object.assign({}, {}, { value: item.sourceName, label: item.sourceName })
  );
});

state.sourceList 指：state 对象的 sourceList 属性

state.sourceNameList 指：state 对象的 sourceNameList 属性

const state = {
    sourceList: [...],
    sourceNameList: []
}

技巧 2

去掉数组集合的重复部分，只获取不重复部分，如 state.sourceNameList 内容为：

state.sourceNameList = [
	{
		label: '1111',
        value: '可乐'
	},
    {
		label: '1111',
        value: '可乐'
	},
    {
		label: '2222',
        value: '冰糖'
	},
    {
		label: '2222',
        value: '冰糖'
	},
    {
		label: '3333',
        value: '雪梨'
	},
]

去掉上方重复的部分，获取不重复的部分给 state.sourceNameList：

state.sourceNameList = [
	{
		label: '1111',
        value: '可乐'
	},
    {
		label: '2222',
        value: '冰糖'
	},
    {
		label: '3333',
        value: '雪梨'
	},
]

去重代码为：

// 去重
let hash = [];
state.sourceNameList = state.sourceNameList.reduce((item, next) => {
  hash[next.label] ? "" : (hash[next.label] = true && item.push(next));
  return item;
}, []);

state.sourceNameList 指：state 对象的 sourceNameList 属性

const state = {
  sourceNameList: [],
};

hash 自定义名，next.label 的 label 取决于要去重的属性